<!--  -->
<template>
  <div>
    <div v-if="showFlag">
      <!-- Toast提示专用 -->
      <van-toast id="van-toast" />
      <van-notice-bar text=" قولاي ئۈندىدار ئەپچىمىز ئېچىۋېتىلدى ، يېڭىچە ئىقتىدارلار قوشىلىۋاتىدۇ ، شىركىتىمىزگە مەبلەغ ئىزدەيمىز" />
      <div class="container">
        <div class="inputContainer">
          <input
            class="input"
            v-model="phoneNumber"
            type="number"
            @input="validateNumber"
            focus
            placeholder="يانفۇن نومۇرىڭىزنى كىرگۈزۈڭ"
            placeholder-style="font-size:12px;font-family:'Alp Ekran'"
          >
        </div>
        <div
          class="repeat"
          v-if="numFlag"
        >
          <span class="sameNumber">{{partNumber}}</span>
          <span class="company">{{company}}</span>
          <!-- <span class="address">{{}}</span> -->
        </div>
        <div class="price">
          <div class="title">
            قاچىلىماقچى بولغان سوممىنى تاللاڭ
          </div>
          <div class="priceContainer">
            <div
              class="unitPrice"
              @click="changeColor(index)"
              :class="{active:index==isActive}"
              v-for="(item,index) in flows"
              :key="item.id"
            >
              <span class="sellPrice">{{item.p}}</span>
              <span class="oldPrice">باھاسى: {{item.sellPrice}}￥</span>
            </div>
          </div>
        </div>
        <div class="more">
          <!-- <i-button @click="submitOrder" plain type="primary" size="large">قاچىلاش</i-button> -->
          <button
            @click="submitOrder"
            class="btn"
          >قاچىلاش</button>
          <div class="charge-notice">
            <div>قاچىلاش ئۇسۇلى: تېلىفۇن نومۇرىڭىزنى كىرگۈزسىڭىز ئۆلچەملىك باھاسىنى كۆرەلەيسىز.
            </div>
            <div>سەمىمىي ئەسكەرتىش: نورمال بولغاندا سىز پۇل تاپشۇرغاندىن كېيىن بىر مىنۇت ئىچىدە پۇل قاچىلىنىپ بولىدۇ ، ئەگەر پۇل تۆلەپ 10 مىنۇت ئىچىدە پۇل كىرمىسە بىز بىلەن ئالاقىلىشىڭ .
            </div>
            <div @longpress="copyNum">يانفۇن نومۇر ، ئۈندىدار : 13122060027</div>
          </div>
        </div>
        <!-- :style="{backgroundColor:backgroundColor,color:activeColor,borderColor: borderColor}" -->
      </div>
    </div>

    <div v-if="!showFlag">
      <div class="developing">
        <div>功能正在开发中...</div>
        <div>...ئىقتىدار ئەتە ئېچىلىدۇ</div>
      </div>
    </div>

  </div>
</template>

<script>
import md5 from "md5";
import { showToast, showTimerToast, randomNumber } from "@/util";
export default {
  data() {
    return {
      test: {},
      isActive: -1,
      phoneNumber: "",
      divIndex: "",
      backgroundColor: "#fff",
      activeColor: "#19be6b",
      borderColor: "#19be6b",
      order: "",
      company: "",
      address: "",
      numFlag: false,
      showFlag: false,
      flows: [
        { id: 3, p: "20M", sellPrice: 3.0 },
        { id: 4, p: "50M", sellPrice: 6.0 },
        { id: 5, p: "100M", sellPrice: 10.0 },
        { id: 6, p: "200M", sellPrice: 15.0 },
        { id: 7, p: "500M", sellPrice: 30.0 },
        { id: 9, p: "1G", sellPrice: 50.0 }
      ]
    };
  },
  methods: {
    changeColor(index) {
      this.isActive = index;
      this.divIndex = index;
    },
    submitOrder(e) {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.phoneNumber)) {
        showTimerToast("توغرا يانفۇن نومۇرنى كىرگۈزۈڭ", 1000);
      } else if (this.isActive < 0) {
        showTimerToast("سوممىنى تاللاڭ", 700);
      } else {
        let openID = wx.getStorageSync("userInfo").openId,
          orderID = randomNumber(),
          payAmount = Math.ceil(this.flows[this.divIndex].sellPrice * 100);
        let payURL = "https://wx.2xur7.cn/weapp/wxPay";
        if (openID) {
          this.$http
            .post(payURL, {
              openID: openID,
              orderID: orderID,
              total_fee: payAmount
            })
            .then(res => {
              const paymentInfo = res.data.data;
              wx.requestPayment({
                timeStamp: paymentInfo.timeStamp, //时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间,
                nonceStr: paymentInfo.nonceStr, //随机字符串，长度为32个字符以下,
                package: paymentInfo.package, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*,
                signType: paymentInfo.signType, //签名算法，暂支持 MD5,
                paySign: paymentInfo.paySign, //签名,具体签名方案参见小程序支付接口文档,
                success: res => {
                  let savURL = "https://wx.2xur7.cn/weapp/addOrder", //存储数据
                    orderdata = {
                      open_id: openID,
                      tel_number: this.phoneNumber,
                      order_type: "flowCharge",
                      order_info: JSON.stringify(paymentInfo),
                      order_id: orderID,
                      goods_val: `${this.flows[this.divIndex].p}`,
                      normal_price: this.flows[this.divIndex].inprice,
                      sell_price: this.flows[this.divIndex].sellPrice,
                      profit: (
                        Number(this.flows[this.divIndex].sellPrice) -
                        Number(this.flows[this.divIndex].inprice)
                      ).toFixed(2)
                    };
                  // console.log(orderdata);
                  // 存储数据
                  this.$http.post(savURL, orderdata).then(res => {});
                  // 充值花费
                  let chargeURL = "https://v.juhe.cn/flow/recharge",
                    chargeData = {
                      phone: this.phoneNumber,
                      pid: this.flows[this.divIndex].id,
                      orderid: orderID,
                      sign: md5(
                        "JH71c2c82294299eb8c6d01d0a2a898301" +
                          "b8577718ff049042b8dbbb1278ad77f3" +
                          this.phoneNumber +
                          this.flows[this.divIndex].id +
                          orderID
                      ).toLowerCase(),
                      key: "b8577718ff049042b8dbbb1278ad77f3"
                    };
                  this.$http
                    .get(chargeURL, chargeData)
                    .then(res => {
                      showToast("مۇۋەپپىقىيەتلىك قاچىلاندى", 1000);
                    })
                    .catch(err => {
                      showToast("مەغلۇپ بولدى، بىز بىلان ئالاقىلىشىڭ", 1000);
                    });
                },
                fail: () => {},
                complete: () => {}
              });
            });
        }
      }
    },
    validateNumber() {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (myreg.test(this.phoneNumber)) {
      }
      if (this.phoneNumber.length == 11) {
        wx.showLoading();
        let validateURL =
          "https://v.juhe.cn/flow/telcheck?key=b8577718ff049042b8dbbb1278ad77f3&phone=" +
          this.phoneNumber;
        this.$http.get(validateURL).then(res => {
          wx.hideLoading();
          this.company = res.data.result[0].company;
          var flows = res.data.result[0].flows;

          for (const i in flows) {
            // 加价
            if (parseFloat(flows[i].inprice) >= 14) {
              flows[i].sellPrice = (parseFloat(flows[i].inprice) + 0.5).toFixed(
                2
              );
            } else if (parseFloat(flows[i].inprice) < 3) {
              flows[i].sellPrice = (parseFloat(flows[i].inprice) + 0.1).toFixed(
                2
              );
            } else {
              flows[i].sellPrice = (parseFloat(flows[i].inprice) + 0.2).toFixed(
                2
              );
            }
          }
          this.flows = flows;
          // console.log(this.flows);
          // 运营商翻译
          if (res.data.result[0].company == "中国联通") {
            this.company = "بىرلەشمە خەۋەرلىشىش";
          }
          if (res.data.result[0].company == "中国电信") {
            this.company = "جۇڭگو تېلىگراف";
          }
          if (res.data.result[0].company == "中国移动") {
            this.company = "كۆچمە خەۋەرلىشىش";
          }
        });
      }
    },
    copyNum() {
      wx.setClipboardData({
        data: "13122060027", //需要设置的内容,
        success: res => {
          showTimerToast("تېلىفۇن نومۇر كۆچۈرۈلدى", 2000);
        }
      });
    }
  },
  components: {},
  computed: {
    partNumber() {
      if (this.phoneNumber.length == 11) {
        this.numFlag = true;
        var reg = /^(\d{3})(\d{4})(\d{4})$/;
        var matches = reg.exec(this.phoneNumber);
        return matches[1] + " " + matches[2] + " " + matches[3];
      }
    }
  },
  onLoad() {
    let { state } = wx.getStorageSync("config");
    if (state == "enter") {
      this.showFlag = true;
    } else {
      this.showFlag = false;
    }
  }
};
</script>
<style lang='scss'>
page {
  background-color: #fff;
  // background-color: #f0eff5;
  font-family: "Alp Ekran";
}
.active {
  background-color: #2b85e4 !important;
  color: #fff !important;
  border-color: #ccc !important;
}
.container {
  width: 100%;
  margin-top: 25rpx;
  background-color: #fff;
  .inputContainer {
    padding-top: 20rpx;
    border-radius: 2px;
    margin: 10rpx auto;
    width: 95%;
    border-top: 1px solid #efeff4;
    border-bottom: 1px solid #efeff4;
    // box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.3);
    .input {
      color: #1a1717;
      font-weight: bold;
      padding-bottom: 15rpx;
      padding-left: 20rpx;
      // font-size: 40rpx;
      font-size: 30rpx;
    }
  }
  .repeat {
    width: 94%;
    margin-left: 3%;
    border-bottom: 1px solid #efeff4;
    // min-height: 30rpx;
    // display: flex;
    // justify-content: space-around;
    height: 60rpx;
    .sameNumber {
      margin-left: 10rpx;
      color: #2b85e4;
      font-size: 40rpx;
    }
    .company {
      margin-top: 20rpx;
      text-align: right;
      color: #666;
      float: right;
      font-size: 25rpx;
      margin-right: 55rpx;
    }
  }

  .price {
    width: 92%;
    margin: 0 auto;
    .title {
      text-align: right;
      color: #999;
      font-size: 20rpx;
      margin-top: 20rpx;
      margin-right: 30rpx;
      margin-bottom: 10rpx;
    }
    .priceContainer {
      display: flex;
      flex-wrap: wrap;
      // justify-content: center;
      justify-content: space-between;
      .unitPrice {
        color: #2b85e4;
        border: solid 2rpx #2b85e4;
        height: 120rpx;
        width: 30%;
        border-radius: 5px;
        margin-left: 8rpx;
        margin-right: 8rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin: 8rpx 1%;
        font-family: "UKIJ Ekran" !important;
        .sellPrice {
          direction: rtl;
          margin-top: 16rpx;
          // color: #19be6b;
          line-height: 60rpx;
          font-weight: 100;
          font-size: 39rpx;
        }
        .oldPrice {
          font-size: 26rpx;
          // color: #2b85ef;
          font-weight: 100;
          direction: rtl;
        }
      }
    }
  }
  .more {
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    // height: 100rpx;
    .btn {
      font-family: "UKIJ Ekran" !important;
      border: 3rpx solid #2b85e4;
      background-color: #fff;
      color: #2b85e4;
      width: 100%;
    }
    .btn:active {
      border: 3rpx solid #5cadff;
    }
  }
}
.developing {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250rpx;
  margin-top: -250rpx;
  // line-height: 300rpx;
  text-align: center;
  color: #fff;
  width: 500rpx;
  height: 300rpx;
  border-radius: 15px;
  background-color: #000;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.charge-notice {
  width: 96%;
  // height: 320rpx;
  margin: 0 auto;
  margin-top: 30rpx;
  // box-shadow: 0 0 7rpx 3rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #2b85e4;
  border-radius: 20rpx;
  padding: 10rpx 10rpx;
  direction: rtl;
  font-size: 30rpx;
  text-indent: 1em;
  color: #2b85e4;
  line-height: 1.5em;
}
</style>